<template>
  <div>
    <Title title="设备统计"></Title>
    <div class="top_item1">
      <!-- <div>
        <img src="/src/assets/images/监控.png" alt="" />
        <div>{{ name }}</div>
      </div>
      <div>
        <img src="/src/assets/images/消防.png" alt="" />
        <div>消防类</div>
      </div>
      <div>
        <img src="/src/assets/images/其它.png" alt="" />
        <div>其他类</div> -->
      <!-- </div> -->
      <MyEearts :option="option"></MyEearts>
    </div>
  </div>
</template>

<script setup>
import { onMounted, reactive, ref } from 'vue'
import Title from '../../components/commont/Title.vue'
import { getshebei } from '../../request/index'
import MyEearts from '../commont/MyEearts.vue'
const name = ref()
let option = ref({
  tooltip: {
    trigger: 'item',
    formatter: '{a} <br/>{b} : {c} ({d}%)'
  },
  legend: {
    textStyle: {
      color: '#fff'
    },
    top: '10px',
    right: '5%',
    orient: 'vertical',
    data: ['rose1', 'rose2', 'rose3']
  },
  series: [
    {
      name: 'Area Mode',
      type: 'pie',
      radius: [0, 50],
      center: ['50%', '50%'],
      roseType: 'area',
      itemStyle: {
        borderRadius: 7
      },
      label: {
        show: false
      },
      data: [
        { value: 20, name: 'rose1' },
        { value: 40, name: 'rose2' },
        { value: 80, name: 'rose3' }
      ]
    }
  ]
})
onMounted(() => {
  getshebei().then((res) => {
    // console.log(res)
    // name.value = res.data.data[0].name
    option.value.legend.data = res.data.data.map((item, index) => {
      return item.name
    })
    option.value.series[0].data = res.data.data.map((item, index) => {
      return { value: item.value, name: item.name }
    })
  })
})
</script>

<style scoped lang="scss">
.top_item1 {
  font-size: 16px;
  margin-top: 10px;
  width: 100%;
  height: 200px;
  background: #0c1d5f;
  display: flex;
  align-items: center;
  justify-content: space-around;
  text-align: center;
  color: #fff;
}
.top_item1 > div {
  img {
    width: 100px;
    height: 100px;
  }
}
</style>